<template>
    <div class="category_list">
        分类列表页面xxx
        {{$route.params.categoryId}}

        <div class="produt">
            <div class="img"><img src="" alt=""></div>
            <div class="title">22</div>
            <div class="price">999</div>
            <div class="add-to-cart">加入购物车</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CategoryList',
    methods: {
        getCategoryListData(){
            console.log("异步请求ajax数据")
        }
    },
    //因为都是复用的CategoryList组件，所以当不同分类切换时, CategoryList组件
    //不会在销毁后重新创建，生命周期中的钩子函数(created)不会再被调用到,则:
    
    //1.可以使用wacth来监视$route的变化
    //监视route的变化，动态查询数据
    //创建后 created钩子函数
    /* created(){
        this.getCategoryListData()
    },
    watch: {
        $route(newValue, oldValue){
            //console.log(newValue, oldValue)
            getCategoryListData()
            next()
        }
    } */
    beforeRouteEnter (to, from, next) {
        // console.log(this)
        next(vm => {
            //console.log(vm);
            vm.getCategoryListData()//请求资源
        });
    },
    beforeRouteUpdate (to, from, next) {
        this.getCategoryListData()//修改请求资源
        next()
    }
}
</script>

<style>
    
</style>
